<div class="flex flex-column align-items-end border-bottom-1 border-gray-200 pt-3 pb-3">
  <div class="flex flex-row align-items-center">
    <button
      pButton
      pRipple
      type="button"
      icon="pi pi-bell"
      class="p-button-rounded p-button-secondary p-button-text mr-3"
    ></button>
    <p-avatar
      image="https://images.unsplash.com/photo-1619946794135-5bc917a27793?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9"
      size="small"
      shape="circle"
      class="mr-2"
    ></p-avatar>
    <div>
      <p class="text-base mb-0 mt-1 text-gray-700">{{username}}</p>
      <p class="text-sm mb-1 mt-0 text-gray-500">{{userRole}}</p>
    </div>
    <div>
      <button
        pButton
        pRipple
        type="button"
        icon="pi pi-angle-down"
        class="p-button-secondary p-button-text"
        (click)="menu.toggle($event)"
      ></button>
      <p-menu #menu [popup]="true" [model]="items"></p-menu>
    </div>
  </div>
</div>
